<template>
    <div>
        <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
            :buttons="fyButtons">
            <NuformItem label="已有查询模板" prop="exist" width="auto">
                <el-radio-group v-model="formData.exist" class="existRadio" @change="handleExist">
                    <el-radio-button v-for="(item, index) in existList" :key="index" :label="item"></el-radio-button>
                </el-radio-group>
                <el-button type="text" @click="editTemp()">编辑</el-button>
            </NuformItem>
            <div class="collapseBtn">
                <el-button type="text" icon="el-icon-arrow-up" v-if="isShow" @click="handleShow()">收起筛选</el-button>
                <el-button type="text" icon="el-icon-arrow-down" v-else @click="handleShow()">高级筛选</el-button>
            </div>
            <div v-show="isShow">
                <NuformItem label="数据查询条件：" width="auto"></NuformItem>
                <NuformItem class="nuSTY" label="报表数据项-计量点选择" prop="meter_id" width="auto" label-width="160px"
                    :rules="[{ required: true, message: '计量点不能为空' }]">
                    <NuSelectCheckbox :cityOptions="measureOptions" v-model="formData.meter_id">
                    </NuSelectCheckbox>
                </NuformItem>
                <NuformItem class="nuSTY" label="报表数据项-数据项选择" prop="point_type" width="auto" label-width="160px"
                    :rules="[{ required: true, message: '数据项不能为空' }]">
                    <NuSelectCheckbox :cityOptions="dataItemOptions" v-model="formData.point_type">
                    </NuSelectCheckbox>
                </NuformItem>
                <NuformItem label="数据粒度" prop="data_grarity" width="auto">
                    <el-radio-group v-model="formData.data_grarity" @change="handleInput">
                        <el-radio-button v-for="(item, index) in granularityList" :key="index"
                            :label="item"></el-radio-button>
                    </el-radio-group>
                </NuformItem>
            </div>
            <NuformItem label="报表样式" prop="align_type" width="auto">
                <el-radio-group v-model="formData.align_type">
                    <el-radio-button label="纵向"></el-radio-button>
                    <el-radio-button label="横向"></el-radio-button>
                </el-radio-group>
            </NuformItem>
            <NuformItem label="本次查询时间范围" prop="time" label-width="160px" :rules="[{ required: true, message: '时间不能为空' }]"
                v-if="isShowDaterangeType">
                <el-date-picker v-model="formData.time" :type="isDaterangeType" :value-format="isDaterangeformat"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期">
                </el-date-picker>
            </NuformItem>
            <div class="btnBox">
                <nu-button type="primary" class="searchButton" @click="searchTable">查询</nu-button>
                <nu-button type="primary" class="searchButton" @click="save">保存查询条件</nu-button>
                <nu-button class="searchButton" @click="resetForm('formData')">清除</nu-button>
            </div>
        </NuVerifyForm>
        <nu-dialog title="保存查询条件至模板" :visible.sync="dialogShow" width="800px" center :close-on-click-modal="false" top="5vh"
            :modal-append-to-body="false" @close="diaFormClose">
            <div class="dialogHeaderSearch">
                <NuVerifyForm :model="dialogFormData" ref="dialogFormData" label-width="140px"
                    class="submitForm saveFormwork" :buttons="fyButtons" @submitForm="submitDialogFormForm">
                    <NuformItem label="查询模板名称：" prop="name" width="70%" :rules="[{ required: true, message: '不能为空' }]">
                        <nu-input type="text" v-model="dialogFormData.name" size="middle" placeholder="请输入"></nu-input>
                    </NuformItem>
                    <NuformItem label="是否生成定时报表：" prop="auto_gen" width="70%" :rules="[{ required: true, message: '标识不能为空' }]">
                        <el-radio-group v-model="dialogFormData.auto_gen">
                            <el-radio-button label="是"></el-radio-button>
                            <el-radio-button label="否"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem label="定时报表生成时间：" prop="name" width="70%" v-if="isTimeTextShow">
                        <nu-input type="text" v-model="dialogFormData.expression" size="middle" disabled></nu-input>
                    </NuformItem>
                    <NuformItem width="70%">
                        <nu-button class="dialogSearchButton" type="primary" @click="diaFormClose">取消</nu-button>
                        <nu-button class="dialogSearchButton" type="primary" @click="diaFormSave">确定</nu-button>
                    </NuformItem>
                </NuVerifyForm>

            </div>
        </nu-dialog>
        <nu-dialog title="编辑查询模板" :visible.sync="openEditShow" width="1200px" center :close-on-click-modal="false" top="5vh"
            :modal-append-to-body="false">
            <div class="editBox">
                <NuVerifyForm :model="editForm" ref="formData" label-width="0" class="searchForm" :buttons="fyButtons">
                    <NuformItem prop="timeReport" width="auto">
                        <el-radio-group v-model="editForm.timeReport" size="mini">
                            <el-radio-button label="日报表"></el-radio-button>
                            <el-radio-button label="月报表"></el-radio-button>
                            <el-radio-button label="年报表"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem prop="typeReport" width="auto">
                        <el-radio-group v-model="editForm.typeReport" size="mini">
                            <el-radio-button label="定时报表"></el-radio-button>
                            <el-radio-button label="非定时报表"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem prop="name" width="auto">
                        <nu-input type="text" v-model="editForm.name" placeholder="请输入报表名称" size="middle"></nu-input>
                    </NuformItem>
                </NuVerifyForm>
            </div>
            <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
                :operates="operates(this)" border>
            </NuTableList>
            <div slot="footer" class="dialog-footer">
                <nu-button class="dialogSearchButton" type="primary" @click="submitFileForm">确 定</nu-button>
                <nu-button class="dialogSearchButton" @click="openEditShow = false">取 消</nu-button>
            </div>
        </nu-dialog>
        <nu-dialog :title="dialogTitle" :visible.sync="dialogEditShow" width="900px" center :close-on-click-modal="false"
            top="5vh" :modal-append-to-body="false" @close="diaEditClose">
            <div class="dialogHeaderSearch">
                <NuVerifyForm :model="dialogEditFormData" ref="dialogEditFormData" label-width="170px" class="submitForm"
                    @submitForm="dialogEditSubmitForm" :buttons="fyButtons">
                    <NuformItem label="模板名称：" prop="name" width="70%">
                        <nu-input type="text" v-model="dialogEditFormData.name" size="middle"
                            :disabled="dialogFormDisabled"></nu-input>
                    </NuformItem>
                    <NuformItem label="报表数据项-计量点选择：" prop="meter_id" width="70%">
                        <NuSelectCheckbox :cityOptions="measureOptions" v-model="dialogEditFormData.meter_id"
                            :disabled="dialogFormDisabled">
                        </NuSelectCheckbox>
                    </NuformItem>
                    <NuformItem label="报表数据项-数据项选择：" prop="point_type" width="70%">
                        <NuSelectCheckbox :cityOptions="dataItemOptions" v-model="dialogEditFormData.point_type"
                            :disabled="dialogFormDisabled">
                        </NuSelectCheckbox>
                    </NuformItem>
                    <NuformItem label="数据粒度：" prop="data_grarity" width="100%">
                        <el-radio-group v-model="dialogEditFormData.data_grarity" @change="handleInput"
                            :disabled="dialogFormDisabled">
                            <el-radio-button v-for="(item, index) in granularityList" :key="index"
                                :label="item"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem label="是否生成定时报表：" prop="type" width="70%">
                        <el-radio-group v-model="dialogEditFormData.auto_gen" :disabled="dialogFormDisabled">
                            <el-radio-button label="是"></el-radio-button>
                            <el-radio-button label="否"></el-radio-button>
                        </el-radio-group>
                    </NuformItem>
                    <NuformItem label="定时报表生成时间：" prop="time" width="70%" v-if="isEditTimeTextShow">
                        <nu-input type="text" v-model="dialogEditFormData.expression" size="middle" disabled></nu-input>
                    </NuformItem>
                    <NuformItem width="70%" v-if="dialogTitle == '编辑'">
                        <nu-button class="dialogSearchButton" type="primary" @click="diaEditSave">保存</nu-button>
                        <nu-button class="dialogSearchButton" type="primary" @click="diaEditClose">关闭</nu-button>
                    </NuformItem>
                </NuVerifyForm>

            </div>
        </nu-dialog>
    </div>
</template>
<script>
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuButton from "@/components/base/button"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuDialog from "@/components/base/dialog"
import NuTableList from "@/components/tableList/TableFormList"
import NuSelectCheckbox from "@/components/select-checkBox/select-checkBox.vue"
const operates = that => [
    {
        label: '查看',
        icon: '',
        width: '50px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.openDetail(row);
        },
    },
    {
        label: '编辑',
        icon: '',
        width: '50px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.openEdit(row);
        },
    },
    // {
    //   isShow: row => {
    //     return false;
    //   },
    // },
    {
        label: '删除',
        icon: '',
        width: '50px',
        isShow: row => {
            return true;
        },
        disabled: row => {
            return false;
        },
        method: row => {
            that.tbRowdetele(row);
        },
    },
];
export default {
    components: { NuVerifyForm, NuformItem, nuButton, nuInput, nuSelect, nuDialog, NuTableList, NuSelectCheckbox },
    data() {
        return {
            isShow: true,
            formData: {
                exist: '',
                align_type: '纵向',
                time: null,
                meter_id: [],
                point_type: [],
                data_grarity: '每15min增量值'
            },
            operates,
            fyButtons: [],
            measureOptions: ['全选'],
            meter_id: [],
            dataItemOptions: ['全选'],
            point_type: [],
            existList: ['日15min电量', '机组日1h电量', '线路日1h电量', '主变月电量', '机组月电量', '年电量'],
            granularityList: ['每15min增量值', '每15min原值', '每小时增量值', '每天增量值', '每月增量值'],
            dialogShow: false,
            openEditShow: false,
            dialogEditShow: false,
            isShowDaterangeType: true,
            dialogFormData: {
                name: '',
                auto_gen: '',
                time: ''
            },
            editForm: {
                timeReport: '日报表',
                typeReport: '定时报表',
                name: ''
            },
            columns: [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1);
                    },
                },
                {
                    label: '模板名称',
                    prop: 'name',
                },
                {
                    label: '是否生成定时报表',
                    prop: 'supplierName',
                },
                {
                    label: '报表类型',
                    prop: 'contractCoalType',
                }
            ],
            dialogTitle: '',
            dataSource: [{}],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 310px)',
                props: {
                    fixed: 'right'
                }
            },
            dialogFormDisabled: null,
            dialogEditFormData: {
                name: '日15min电量',
                meter_id: ['1号发电机', '2号发电机'],
                point_type: ['正向有功', '反向有功'],
                data_grarity: '每15min增量值',
                auto_gen: '是',
                expression: ''
            }
        }
    },
    computed: {
        isTimeTextShow: function () {
            return this.dialogFormData.auto_gen == '是'
        },
        isEditTimeTextShow: function () {
            return this.dialogEditFormData.auto_gen == '是'
        },
        isDaterangeType: function () {
            const gm = {
                default: 'daterange',
                '每天增量值': 'month',
                '每月增量值': 'monthrange',
                '每天原值': 'month',
            }
            return gm?.[this.formData.data_grarity] ? gm[this.formData.data_grarity] : gm.default
        },
        isDaterangeformat: function () {
            const gm = {
                default: 'yyyy-MM-dd',
                '每天增量值': 'yyyy-MM',
                '每月增量值': 'yyyy-MM',
                '每天原值': 'yyyy-MM',
            }
            return gm?.[this.formData.data_grarity] ? gm[this.formData.data_grarity] : gm.default
        }
    },
    mounted() {
        this.getPointNames()
        this.getMesaNames()
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.$emit('childEvent', JSON.parse(JSON.stringify(this.formData)))
            }
        },
        /**
         * 保存查询条件至模板
         */
        submitDialogFormForm(val) {
            if (val) {
                this.diaFormClose()
            }
        },
        /**
         * 弹窗-保存查询条件至模板-保存
         */
        diaFormSave() {
            this.$refs['dialogFormData'].submitForm('form');
        },
        /**
         * 弹窗-保存查询条件至模板-取消
         */
        diaFormClose() {
            this.dialogShow = false
            this.resetForm('dialogFormData')
        },
        /**
         * 弹窗-编辑查询模板-确定
         */
        submitFileForm() {
            this.openEditShow = false
        },
        /**
        * 编辑查询模板
        */
        dialogEditSubmitForm(val) {
            if (val) {
                console.log(val)
                this.dialogEditShow = false
            }
        },
        /**
         * 弹窗-编辑查询模板-确定
         */
        diaEditSave() {
            this.$refs['dialogEditFormData'].submitForm('form');
        },
        /**
         * 弹窗-编辑查询模板-取消
         */
        diaEditClose() {
            this.dialogEditShow = false
        },
        /**
         * 高级筛选收起
         */
        handleShow() {
            this.isShow = !this.isShow
            this.$nextTick(() => {
                this.$parent.$refs.tableForm.resizeNum = Math.random()
            })
        },
        /**
         * 数据粒度
         */
        handleInput(val) {
            let o = {
                default: '每日0：30生成昨日日报表',
                '每天增量值': '每月1号0：30生成上月月报表',
                '每月增量值': '每年1月1号0：30生成去年年报表'
            }
            this.dialogEditFormData.expression = o[val] ? o[val] : o.default
            this.formData.time = null
            this.isShowDaterangeType = false
            this.$nextTick(() => {
                this.isShowDaterangeType = true
            })
        },
        /**
         * 已有查询模板 change
         * @param {*} val 
         */
        handleExist(val) {
            if (val == '机组日1h电量') {
                this.formData = {
                    exist: val,
                    align_type: '横向',
                    time: ['2023-03-08', '2023-03-10'],
                    meter_id: ['1号发电机', '2号发电机'],
                    point_type: ['正向有功', '反向有功'],
                    data_grarity: '每天增量值'
                };
            } else {
                this.formData = {
                    exist: val,
                    align_type: '纵向',
                    time: [],
                    meter_id: [],
                    point_type: [],
                    data_grarity: ''
                };
            }
        },
        /**
         * 编辑已有查询模板
         */
        editTemp() {
            this.openEditShow = true
            let postData = {};
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.dataSource = [];
            this.$httpGet(window.api.getEditTemp, postData).then(res => {
                if (res.success && res.data) {
                    this.dataSource = res.data;
                } else {
                }
            }).catch(err => {

            });
        },
        /**
         * 保存查询条件至模板
         */
        save() {
            let o = {
                default: '每日0：30生成昨日日报表',
                '每天增量值': '每月1号0：30生成上月月报表',
                '每月增量值': '每年1月1号0：30生成去年年报表'
            }
            this.dialogFormData.expression = o[this.formData.data_grarity] ? o[this.formData.data_grarity] : o.default
            this.dialogFormData.auto_gen = '是'
            this.dialogShow = true
        },
        /**
         * 编辑查看模板-编辑
         */
        openEdit(row) {
            this.dialogEditShow = true
            this.dialogTitle = '编辑'
            this.dialogFormDisabled = false
            Object.assign(this.dialogEditFormData, row)
            let o = {
                '日报表': '每日0：30生成昨日日报表',
                '月报表': '每月1号0：30生成上月月报表',
                '年报表': '每年1月1号0：30生成去年年报表'
            }
            this.dialogEditFormData.expression = o[row.contractCoalType] ? o[row.contractCoalType] : o.default
        },
        /**
         * 编辑查看模板-详情
         */
        openDetail(row) {
            this.dialogEditShow = true
            this.dialogTitle = '查看'
            this.dialogFormDisabled = true
            Object.assign(this.dialogEditFormData, row)
            let o = {
                '日报表': '每日0：30生成昨日日报表',
                '月报表': '每月1号0：30生成上月月报表',
                '年报表': '每年1月1号0：30生成去年年报表'
            }
            this.dialogEditFormData.expression = o[row.contractCoalType] ? o[row.contractCoalType] : o.default
        },
        /**
         * 编辑查看模板-删除
         */
        tbRowdetele(row) {
            this.$confirm('确定要删除【' + row.name + '】吗？', '确认删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.delStationTableData(row)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /**
         * 重置表单
         */
        resetForm(formName) {
            if (formName == 'formData') {
                this.formData = {
                    exist: '',
                    align_type: '纵向',
                    time: [],
                    meter_id: [],
                    point_type: [],
                    data_grarity: ''
                };
            } else {
                // this.$refs[formName].resetForm('form');
                for (let k in this[formName]) {
                    if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
                        this[formName][k] = ''
                    } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
                        this[formName][k] = []
                    } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
                        this[formName][k] = ''
                    }
                }
            }

        },
        /**
         * 获取电度量名称
         */
        getPointNames() {
            this.$httpGet(window.api.getPointNames)
                .then((res) => {
                    if (res.code == 200) {
                        this.dataItemOptions= ['全选', ...res.pointNames]
                    }
                })
                .catch((err) => { });
        },
        /**
         * 获取量测类型
         */
        getMesaNames() {
            this.$httpGet(window.api.getMesaNames)
                .then((res) => {
                    if (res.code == 200) {
                        this.measureOptions = ['全选', ...res.mesaNames]
                    }
                })
                .catch((err) => { });
        },
    }
}
</script>
<style scoped>
::v-deep .el-form-item {
    display: block;
}

.existRadio ::v-deep .el-radio-button {
    margin-right: 10px;
}

.existRadio ::v-deep .el-radio-button__inner {
    border-left: 1px solid #DCDFE6;
    border-radius: 4px;
}

.nuSTY {
    display: inline-block;
    margin: 0px 10px;
}

.collapseBtn {
    position: absolute;
    right: 36px;
    z-index: 100;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.searchForm {
    position: relative;
}

.btnBox {
    display: flex;
    float: right;
    z-index: 10;
    position: absolute;
    bottom: 0;
    right: 10px;
}

.editBox {
    display: flex;
    justify-content: right;
    align-items: center;
}

.editBox ::v-deep.el-form-item {
    display: inline-block;
    margin-bottom: 0;
}

.saveFormwork.submitForm .el-form-item {
    margin-bottom: 22px;
}

.saveFormwork.submitForm {
    width: 70%;
}

::v-deep .el-form-item__error {
    padding-top: 0px;
    top: 95%;
}
</style>